import { CSSProperties } from "vue";

type popoverPropsType = {
  isShow?: boolean;
  bindNode?: HTMLElement;
  content?: VNode | Component;
  titleContent?: VNode | Component;
  title?: string;
  showTitle?: boolean;
  backdropFilter?: string;
  inset?: {
    top?: number;
    right?: number;
    bottom?: number;
    left?: number;
  };
  style?: CSSProperties;
};
const defultInfo = (): popoverPropsType => {
  return {
    isShow: false,
    content: () => h("div", {}, ""),
    title: "title",
    titleContent: null,
    showTitle: true,
    bindNode: null,
    backdropFilter: null,
    inset: {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0
    },
    style: {
      border: "1px solid var(--el-border-color-lighter)",
      borderRadius: "0px",
      inset: "auto auto auto auto"
    }
  };
};
const popoverProps = ref<popoverPropsType>(defultInfo());

const showPopover = (option: popoverPropsType) => {
  const el = document.querySelector("#app");
  let scaleValues = el.style?.transform.slice(6, -1).split(",").map(Number);
  if (el.style?.transform != '') {
    if (scaleValues?.length < 2) {
      scaleValues = [scaleValues[0] ?? 1, scaleValues[0] ?? 1];
    }
  } else {
    scaleValues = [1, 1];
  }
  const xScale = scaleValues[0];
  const yScale = scaleValues[1];
  console.log(xScale);

  popoverProps.value.style = option?.style ?? {};
  let top = `${option?.bindNode.getBoundingClientRect().bottom / yScale + (option?.inset?.top ?? 15)}px`;
  let right = option?.inset?.right ? `${option?.inset?.right ?? 15}px` : "auto";
  let bottom = `${option?.inset?.bottom ?? 15}px`;
  let left = option?.inset?.right ? "auto" : `${option?.bindNode.getBoundingClientRect().left / xScale + (option?.inset?.left ?? 0)}px`;
  popoverProps.value.style.inset = `${top} ${right} ${bottom} ${left}`;
  popoverProps.value.content = option?.content;
  popoverProps.value.isShow = true;
  popoverProps.value.title = option?.title || "title";
  popoverProps.value.titleContent = option?.titleContent;
  popoverProps.value.showTitle = option?.showTitle;
  popoverProps.value.backdropFilter = option?.backdropFilter || null;
  // popoverProps.value.border = option?.border || '1px solid var(--el-border-color-lighter)'
  // popoverProps.value.borderRadius = option?.borderRadius || '0px'
};

const closePopover = () => {
  popoverProps.value = defultInfo();
};

export { popoverProps, showPopover, closePopover };
